<<template>
    <div class="home-purchase">
        <purchase :cneeds="needs" @handleSearch="handleSearch" @refresh="refresh"></purchase>
        <div v-show="null !== needs && needs.length > 0"
            style="width: 100%;display:flex;justify-content: center;margin-top: 10px;">
            <el-pagination background layout="prev, pager, next" :page-size="10" :total="total"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

    <script setup>
    import Purchase from "@/components/Purchase.vue";
    import { selectAllPage } from "@/api/order";
    import { ref } from "vue";

    const needs = ref([]);
    const total = ref(0);

    //初始化
    const load = async () => {
        // 获取商品（订单）列表
        await selectAllPage({ keys: '', flag: 'needs', pageNum: 1, pageSize: 10 }).then((res) => {
            needs.value = res.data.data;
            total.value = res.data.total;
        });
    }
    load()

    // 分页
    const handleCurrentChange = (val) => {
        // 获取商品（订单）列表
        selectAllPage({ keys: '', flag: 'needs', pageNum: val, pageSize: 10 }).then((res) => {
            needs.value = res.data.data;
        });
    }

    //搜索
    const searchValue = ref('')
    const handleSearch = (val) => {
        searchValue.value = val
        // 获取商品（订单）列表
        selectAllPage({ keys: searchValue.value, pageNum: 1, flag: 'needs' }).then((res) => {
            needs.value = res.data.data;
            total.value = res.data.total;
        });
    }

    //刷新
    const refresh = () => {
        load()
    }

</script>

    <style lang="scss" scoped>
    .home-purchase {
        margin: 0 auto;
        height: 650px;
        width: 1100px;
        background-color: rgb(228, 237, 241);
    }
</style>